<template>
	<div class="change-org">
		<header class="header" v-if="!viewLabelId">
			<span class="cur-dept-label">
				{{ $t('personalCenter.CurrentLogDepartment', '当前登录组织：') }}
			</span>
			<span class="label-container">
				{{ userInfo?.cur_dept?.dept_name }}
			</span>
		</header>
		<div
			:style="{ position: viewLabelId ? 'initial' : 'sticky' }"
			class="search"
			:class="{ 'scroll-search': isScroll }"
		>
			<van-search
				v-model="searchVal"
				:placeholder=" $t('personalCenter.orgAndDep', '搜索组织ID/名称')"
				:clearable="true"
				:show-action="false"
				@update:model-value="search(viewLabelId, searchVal)"
				@click-left-icon="search(viewLabelId, searchVal)"
			/>
		</div>
		<main style="height: calc(100% - 130px)">
			<section class="org-list" id="main-list" v-if="!viewLabelId">
				<OrgListCard
					v-for="(item, index) in orgList.rows"
					:key="index"
					:cardDetail="item"
					:checkDetail="userInfo"
					:defaultDept="default_dept"
					:isBq="isBq"
					@defauleLoginChange="defauleLoginChange"
				/>
			</section>
			<section class="org-view-list" v-else>
				<ul class="org-view-list-container">
					<li v-for="(item, index) in orgList.rows" :key="index">
						<Label :labelId="viewLabelId" :labelName="item.label" v-if="isBq" />
						<span>
							{{ item.dept_name }}
						</span>
					</li>
				</ul>
			</section>
		</main>
	</div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import OrgListCard from './components/OrgListCard.vue'
import Label from './components/Label.vue'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { apiInit } from '@/services'
const api = apiInit()
const props = defineProps({
	isView: { type: Boolean },
	viewLabelId: { type: Boolean, default: '' },
})
const store = useStore()
const route = useRoute()
let searchVal: string = ''
let mainList: any = ref()
let isScroll = ref<boolean>(false)
let userInfo: any = store.state.userInfo
let orgList: any = ref([])
let viewLabelId: any = ref('')
const tenantDetail = ref({})
const default_dept = ref()
const isBq = ref(true)
let isOutsideOrg: boolean = store.state.userInfo.org_type === 'EXTERNAL'
//新业务组织
let newOrgOpen: boolean = store.state.tenant.tenant_auth.biz_org
const defauleLoginChange = id => {
	orgList.value.rows.forEach(item => {
		if (item.dept_id === id) {
			item.default_dept_flag = 1
			default_dept.value = item
		} else {
			item.default_dept_flag = 0
		}
	})
}
// const fetchOrgList = async (labelId: string = '', searchVal: string = '') => {
// 	let res = await api.baseInfoNew.getOrgList({
// 		dept_name_like: searchVal,
// 		employee_id: '',
// 		label_id: labelId,
// 		page_index: 1,
// 		page_size: 20,
// 		tenant_id: '',
// 	})
// 	return res
// }
//获取组织列表
const fetchOrgList = async (labelId = '', searchVal = '') => {
	console.log('🍊 ----- labelId:', labelId)
	let params: any =
		labelId == '1'
			? {
					dept_name_like: searchVal,
					employee_id: '',
					label_id: labelId,
					page_index: 1,
					page_size: 20,
					tenant_id: '',
			  }
			: {
					dept_name_like: searchVal,
					employee_id: '',
					page_index: 1,
					page_size: 20,
					tenant_id: '',
			  }
	let result: any
	if (labelId == '1') {
		result = await api.baseAuto.PageInternalMulDeptPrivateV1POST({
			payload: params,
		})
	} else {
		result = await api.baseInfoNew.getOrgList(params)
	}
	return result
}
const search = (labelId, searchVal) => {
	let result = fetchOrgList(labelId, searchVal)
	result.then(data => {
		orgList.value = data
	})
}
const scrollEvent = () => {
	isScroll.value = mainList.value?.scrollTop! > 0
}
onMounted(() => {
	tenantDetail.value = JSON.parse(
		localStorage.getItem('tenantDetail') || ''
	).data
	viewLabelId.value = route.query.labelId
	isBq.value = route.query.oneDep !== 'true'
	let result = fetchOrgList(viewLabelId.value)
	result.then(data => {
		orgList.value = data
		let default_dept = orgList.value.rows.filter(item => {
			return item.default_dept_flag === 1
		})
		default_dept.value = default_dept[0]
	})

	mainList.value = document.getElementById('main-list')
	mainList.value.addEventListener('scroll', scrollEvent)
})
onBeforeUnmount(() => {
	mainList.value.removeEventListener('scroll', scrollEvent)
})
</script>
<style scoped lang="less">
.change-org {
	width: 100%;
	height: 100vh;

	.header {
		position: sticky;
		top: 0;
		left: 0;
		padding: 8px 16px;
		background: #fff;
		z-index: 9;
		height: 48px;
		.cur-dept-label {
			display: inline-block;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			color: #8f959e;
			vertical-align: middle;
		}
		.label-container {
			vertical-align: middle;
			align-items: center;
			display: inline-block;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			color: #1f2329;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.search {
		z-index: 9;
		margin-bottom: 12px;

		.van-search {
			border-radius: 4px;
			padding: 0 12px 12px;
			border: 1px solid transparent;
			.van-search__content--square {
				background: #fff !important;
			}
			div {
				background-color: #fff;
			}
		}
	}
	.scroll-search {
		background-color: #fff;
		box-shadow: 0px 4px 6px rgba(135, 139, 159, 0.25);
		.van-search {
			border: 1px solid #dee0e3;
		}
	}
	.org-list {
		width: 100%;
		height: 100%;
		overflow: overlay;
		padding: 0 14px;
	}
	.org-view-list {
		width: 100%;
		height: calc(100% - 50px);
		overflow: auto;
		padding: 0 16px;
		padding-right: 9px;
		&-container {
			padding: 0 16px;
			background: #ffffff;
			border-radius: 8px;
			li {
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid #e8eaed;
				padding: 16px 0;
				span {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 22px;
					color: #1f2329;
					margin-top: -2px;
				}
			}
			li:last-child {
				border: 0;
			}
		}
	}
}
</style>
